<template>
  <view>
    <!-- 选项卡 -->
    <!-- scroll-into-view里面的值要和 下面view的值相等 -->
    <scroll-view
      :scroll-x="true"
      :show-scrollbar="false"
      class="scroll"
      :scroll-into-view="scrollinto"
      :scroll-with-animation="true"
    >
      <view
        v-for="(item, index) in scrollDate"
        :key="index"
        class="scroll-item font-md"
        :class="index === tab ? 'mainColor font-weight font-size font-lg' : ''"
        @click="tabClick(index)"
        :id="'tab' + index"
      >
        {{ item.classname }}
      </view>
    </scroll-view>

    <swiper
      :duration="200"
      :current="tab"
      easing-function="easeInOutCubic"
      @change="swiperTab"
      :style="'height:' + height + 'px'"
    >
      <swiper-item v-for="(list, index) in newList" :key="index">
        <scroll-view
          @scrolltolower="loading(index)"
          :scroll-y="true"
          :style="'height:' + height + 'px'"
        >
          <template v-if="list.list.length !== 0">
            <block v-for="(item, index2) in list.list" :key="index2">
              <userListVue
                @doSupport="doSupport"
                :item="item"
                :index="index"
                @follow="follow"
              ></userListVue>

              <view class="divBg"> </view>
            </block>
            <view class="loading" v-if="loadingbuttom">
              {{ loadingbuttom }}
            </view>
          </template>
          <template v-else> <noDate></noDate> </template>
        </scroll-view>
      </swiper-item>
    </swiper>

    <!-- <userListVue :list="list"></userListVue> -->
  </view>
</template>

<script>
import userListVue from "@/components/common/user-list.vue";
import noDate from "@/components/common/noDate.vue";
// 导入接口
import { getIndexNav, getIndexList } from "../../api/api.js";
export default {
  components: {
    userListVue,
    noDate,
  },
  // 监听用户点击搜索框的事件
  onNavigationBarSearchInputClicked() {
    uni.navigateTo({
      url: "../search/search?type=post",
    });
    // console.log("111");
  },
  // 点击旁边按钮
  onNavigationBarButtonTap() {
    this.navigateTo({ url: "../add-input/add-input" });
    // uni.navigateTo({
    //   url: "../add-input/add-input",
    // });
  },
  data() {
    return {
      num: 0,
      loadingbuttom: "",
      height: "600", //屏幕的高度
      scrollinto: "", //这个是点击之后滚动的id
      tab: 0, // 这个是当标签和索引一样的时候 添加类名
      newList: [],
      scrollDate: [],
    };
  },
  async onLoad() {
    // 获取接口数据
    let res = await getIndexNav();
    if (res) {
      this.scrollDate = res.list;
      let arr = [];
      // 生成列表中的list
      for (let i = 0; i < this.scrollDate.length; i++) {
        let obj = {
          list: [],
          page: 1,
        };
        arr.push(obj);
      }
      this.newList = arr;
      console.log(this.newList);
      // 开始获取数据
      this.getDate();
    }

    // 获取一下屏幕的高度 然后转成rpx 在api 设备信息中获取 uni.getSystemInfo(OBJECT)
    uni.getSystemInfo({
      success: (res) => {
        // console.log("可使用", res.windowHeight);
        this.height = res.windowHeight - uni.upx2px(100);
      },
    });

    // 监听事件
    uni.$on("updateFollowOrSupport", (e) => {
      console.log(e);
      switch (e.type) {
        case "follow": // 关注
          this.follow(e.user_id);
          break;
        case "support": // 顶踩
          this.doSupport(e.data);
          break;
      }
      // this.follow(e.user_id);
    });

    uni.$on("getDate", (res) => {
      this.getDate();
    });
  },
  methods: {
    // 获取数据
    async getDate() {
      // index就是我们当前是那个nav下
      let index = this.tab;
      // nav下的id
      let id = this.scrollDate[index].id;
      // 我们在上面生成list的时候给了一个page值
      let page = this.newList[index].page;

      let isrefresh = page === 1;
      // 获取数据
      let res = await getIndexList(id, page);
      if (res) {
        // 遍历出我们需要的数据
        // console.log(res.list);
        let list = res.list.map((item) => {
          // console.log(item);
          return {
            userpic: item.user.userpic,
            id: item.id,
            user_id: item.user_id,
            title: item.title,
            username: item.user.username,
            newstime: item.create_time,
            isFollow: item.user.fens.length,
            // 当support有值的时候就执行后面的语句 后面语句的意思是 如果是0就是顶否则就是踩
            support: {
              type:
                item.support.length > 0
                  ? item.support[0].type === 0
                    ? "support"
                    : "unsupport"
                  : "",
              support_count: item.ding_count,
              unsupport_count: item.cai_count,
            },
            comment_count: item.comment_count,
            share_num: item.sharenum,
            titlepic: item.titlepic,
          };
        });
        // 如果是第一页直接赋值 如果不是就给他复制进去
        this.newList[index].list = isrefresh
          ? list
          : [...this.newList[index].list, ...list];
      }
    },
    // 点击tab标签的时候
    tabClick(index) {
      this.tab = index;
      this.scrollinto = "tab" + index;
      this.num = 0;
    },
    // 当左右滑动的时候触发
    swiperTab(e) {
      // console.log();
      this.tab = e.detail.current;
      this.scrollinto = "tab" + e.detail.current;
      this.num = 0;
      this.getDate();
    },
    // 上拉加载
    loading(index) {
      console.log(index);
      // 把当前列表的page++让他获取新的数据
      this.newList[index].page++;
      this.getDate();
      this.loadingbuttom = "加载中";
    },
    // 顶踩功能
    doSupport(type) {
      // console.log(type);
      // // type =unsupport 踩 =support 是顶
      // let item = this.newList[this.tab].list[index].support;
      // console.log(this.newList[index]);
      this.newList[this.tab].list.forEach((item) => {
        if (item.id === type.id) {
          // 之前没有操作过
          if (item.support.type === "") {
            item.support[type.type + "_count"]++;
          } else if (
            item.support.type === "support" &&
            type.type === "unsupport"
          ) {
            console.log("顶", item.support.support_count);

            // 顶 - 1
            item.support.support_count--;
            // 踩 + 1
            item.support.unsupport_count++;
          } else if (
            item.support.type === "unsupport" &&
            type.type === "support"
          ) {
            // 之前踩了
            // 顶 + 1
            console.log("不执行", item.support.support_count);
            if (item.support.support_count === -1) {
              item.support.support_count = 0;
            }
            item.support.support_count++;

            // 踩 - 1
            item.support.unsupport_count--;
          }
          item.support.type = type.type;
        }
      });
    },
    // 关注功能
    follow(user_id) {
      console.log(user_id);
      // 遍历全部的对象 然后如果是id一样的话就把他的关注变成true
      this.newList.forEach((tab) => {
        tab.list.forEach((item) => {
          if (item.user_id === user_id) {
            item.isFollow = true;
          }
        });
      });
      uni.showToast({ title: "关注成功" });
    },
  },
};
</script>

<style>
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
::-webkit-scrollbar {
  display: none;
}
</style>
